import React, { useState, useRef, useEffect } from 'react';
import './document.css';

const Header: React.FC = () => {
  const [showCreateModal, setShowCreateModal] = useState(false);
  const modalRef = useRef<HTMLDivElement>(null);
  const buttonRef = useRef<HTMLDivElement>(null);

  const handleCreateClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    setShowCreateModal(!showCreateModal);
  };

  const handleClickOutside = (event: MouseEvent) => {
    if (
      modalRef.current &&
      !modalRef.current.contains(event.target as Node) &&
      buttonRef.current &&
      !buttonRef.current.contains(event.target as Node)
    ) {
      setShowCreateModal(false);
    }
  };

  useEffect(() => {
    if (showCreateModal) {
      document.addEventListener('mousedown', handleClickOutside);
    } else {
      document.removeEventListener('mousedown', handleClickOutside);
    }

    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [showCreateModal]);

  return (
    <div className='header'>
      <div className='header-left'>
        <div className='search-container'>
          <div className='search-input'>
            <span className='search-icon'>🔍</span>
            <input type='text' placeholder='搜索' className='search-field' />
            <span className='filter-icon'>▼</span>
          </div>
        </div>
      </div>

      <div className='header-right'>
        <div
          ref={buttonRef}
          className='btn btn-primary create-btn'
          onClick={handleCreateClick}
        >
          <span className='btn-icon'>➕</span>
          <span className='btn-text'>新建</span>

          {showCreateModal && (
            <div ref={modalRef} className='create-modal'>
              <div className='modal-header'>
                <div className='modal-title'>
                  新建至: 4舍女生 (人工、传媒) /我的文档
                </div>
              </div>

              <div className='modal-content'>
                <div className='create-section'>
                  <div className='section-title'>新建</div>
                  <div className='create-grid'>
                    <div className='create-item'>
                      <div className='create-icon ai-table'>S</div>
                      <div className='create-label'>AI表格</div>
                    </div>
                    <div className='create-item'>
                      <div className='create-icon document'>📄</div>
                      <div className='create-label'>文档</div>
                    </div>
                    <div className='create-item'>
                      <div className='create-icon spreadsheet'>📊</div>
                      <div className='create-label'>表格</div>
                    </div>
                    <div className='create-item'>
                      <div className='create-icon slideshow'>📈</div>
                      <div className='create-label'>幻灯片</div>
                    </div>
                    <div className='create-item'>
                      <div className='create-icon mindmap'>🧠</div>
                      <div className='create-label'>脑图</div>
                    </div>
                    <div className='create-item'>
                      <div className='create-icon whiteboard'>📋</div>
                      <div className='create-label'>白板</div>
                    </div>
                    <div className='create-item'>
                      <div className='create-icon form'>📝</div>
                      <div className='create-label'>表单</div>
                    </div>
                    <div className='create-item'>
                      <div className='create-icon pdf'>📄</div>
                      <div className='create-label'>PDF</div>
                    </div>
                    <div className='create-item'>
                      <div className='create-icon voice'>🎤</div>
                      <div className='create-label'>AI听记</div>
                    </div>
                    <div className='create-item'>
                      <div className='create-icon link'>🔗</div>
                      <div className='create-label'>自定义链接</div>
                    </div>
                    <div className='create-item'>
                      <div className='create-icon folder'>📁</div>
                      <div className='create-label'>文件夹</div>
                    </div>
                  </div>
                </div>

                <div className='create-section'>
                  <div className='section-title'>
                    Office 文档
                    <span className='collaboration-icon'>👥</span>
                  </div>
                  <div className='office-grid'>
                    <div className='create-item'>
                      <div className='create-icon word'>W</div>
                      <div className='create-label'>Word</div>
                    </div>
                    <div className='create-item'>
                      <div className='create-icon excel'>X</div>
                      <div className='create-label'>Excel</div>
                    </div>
                    <div className='create-item'>
                      <div className='create-icon powerpoint'>P</div>
                      <div className='create-label'>PowerPoint</div>
                    </div>
                  </div>
                </div>

                <div className='create-section'>
                  <div className='section-title'>从模板新建</div>
                  <div className='template-item'>
                    <div className='create-icon template'>🎨</div>
                    <div className='template-info'>
                      <div className='create-label'>模板中心</div>
                      <div className='template-desc'>
                        500+行业模版上新,多种场景快速新建
                      </div>
                    </div>
                  </div>
                </div>

                <div className='create-section'>
                  <div className='section-title'>知识管理</div>
                  <div className='template-item'>
                    <div className='create-icon knowledge'>📚</div>
                    <div className='template-info'>
                      <div className='create-label'>知识库</div>
                      <div className='template-desc'>
                        结构化整理文档、共享知识从这里开始
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>

        <button className='btn btn-secondary'>
          <span className='btn-icon'>🤖</span>
          <span className='btn-text'>AI 创作</span>
        </button>

        <button className='btn btn-secondary'>
          <span className='btn-icon'>⬆️</span>
          <span className='btn-text'>上传</span>
        </button>

        <button className='btn btn-secondary'>
          <span className='btn-icon'>🎨</span>
          <span className='btn-text'>模板</span>
        </button>

        <div className='header-icons'>
          <div className='icon-item'>
            <span className='icon'>💼</span>
          </div>
          <div className='icon-item'>
            <span className='icon'>🔔</span>
            <span className='notification-badge'>2</span>
          </div>
          <div className='icon-item'>
            <span className='icon'>👤</span>
          </div>
          <div className='icon-item'>
            <span className='icon'>🔄</span>
          </div>
          <div className='icon-item'>
            <span className='icon'>↗️</span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Header;
